<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>

		<!--
			1:实际开发中，为了循环显示的性能，我们会给每个显示项加一个唯一的key值，但不推荐数组或对象的index下标；
			一般来说后端向前端返回数据的时候，每个item会携带一个唯一的标识符；这样页面渲染性能最高
			2:在实际的开发中不能用数组的下标操作数据，arr[0],因为这样页面不会响应式联动，虽然数据变化了，但页面不会有响应改变，
				只能用操作的数组的方法push pop shift unshif splice sort reverse等
			3:当循环多个dom元素时，外层可以包裹一个容器盒子，但如果页面确实不需要该包裹的容器盒子，则可以用template标签
				而template标签标示模板占位符，起到一个容器的作用，页面中并不渲染，类似小程序中<block></block>标签
				
			4：对象的循环中item项可以传入三个参数分别为（item值，key键名，index下标），而
				而数组的循环中只有两个参数分别为（item值，index下标）
			5：在实际的开发中如果想向对象里面动态加入一个新的键值对时应注意是否与页面有响应式
		-->
		<div id="app">
			<!--<div v-for="(item,index) in list" :key="">{{item.text}}--{{index}}</div>-->

			<template v-for="(item,index) in list">
				<div>{{item.text}}--{{index}}</div>
				<!-- <span>{{item.text}}--{{index}}</span> -->
			</template>

			<div v-for="(item,key,index) in userinfo">{{item}}--{{key}}--{{index}}</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					list: [{
							id: '11',
							text: "css"
						}, {
							id: '22',
							text: "html"
						},
						{
							id: '33',
							text: "js"
						}
					],
					userinfo: {
						name: "tom",
						age: 2323,
						sex: "feal",
						salary: "secrtl"
					}
				},
				methods: {

				}
			})
		</script>

	</body>

</html>